<template>
  <div class="performance-page">
    <el-card class="page-container">
      <template #header>
        <div class="card-header">
          <span>业绩统计</span>
        </div>
      </template>
      
      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon sales">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">¥{{ stats.totalSales }}</div>
                <div class="stat-label">总业绩</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon orders">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.totalOrders }}</div>
                <div class="stat-label">总订单数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon conversion">
                <el-icon><PieChart /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.conversionRate }}%</div>
                <div class="stat-label">转化率</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon employees">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.activeEmployees }}</div>
                <div class="stat-label">活跃员工</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 图表区域 -->
      <el-row :gutter="20" class="charts-row">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>月度业绩趋势</span>
              </div>
            </template>
            <div ref="salesChart" class="chart-container"></div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>员工业绩排行</span>
              </div>
            </template>
            <div ref="employeeChart" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 业绩表格 -->
      <el-card class="table-card">
        <template #header>
          <div class="card-header">
            <span>员工业绩明细</span>
          </div>
        </template>
        
        <el-table
          :data="tableData"
          v-loading="loading"
          class="table-container"
          stripe
        >
          <el-table-column prop="employee_name" label="员工姓名" width="120" />
          <el-table-column prop="department_name" label="部门" width="120" />
          <el-table-column prop="daily_sales" label="日业绩" width="120">
            <template #default="{ row }">
              ¥{{ row.daily_sales }}
            </template>
          </el-table-column>
          <el-table-column prop="weekly_sales" label="周业绩" width="120">
            <template #default="{ row }">
              ¥{{ row.weekly_sales }}
            </template>
          </el-table-column>
          <el-table-column prop="monthly_sales" label="月业绩" width="120">
            <template #default="{ row }">
              ¥{{ row.monthly_sales }}
            </template>
          </el-table-column>
          <el-table-column prop="order_count" label="订单数量" width="100" />
          <el-table-column prop="conversion_rate" label="转化率" width="100">
            <template #default="{ row }">
              {{ row.conversion_rate }}%
            </template>
          </el-table-column>
          <el-table-column prop="performance_date" label="统计日期" width="160" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const loading = ref(false)

const stats = ref({
  totalSales: '1,234,567',
  totalOrders: 892,
  conversionRate: 15.6,
  activeEmployees: 25
})

const tableData = ref([
  {
    employee_name: '张三',
    department_name: '售前转化部门',
    daily_sales: 5000.00,
    weekly_sales: 25000.00,
    monthly_sales: 100000.00,
    order_count: 15,
    conversion_rate: 18.5,
    performance_date: '2024-01-15'
  },
  {
    employee_name: '李四',
    department_name: '售前转化部门',
    daily_sales: 4500.00,
    weekly_sales: 22000.00,
    monthly_sales: 88000.00,
    order_count: 12,
    conversion_rate: 16.2,
    performance_date: '2024-01-15'
  }
])

const salesChart = ref<HTMLElement>()
const employeeChart = ref<HTMLElement>()

onMounted(() => {
  initCharts()
})

const initCharts = () => {
  // 业绩趋势图
  if (salesChart.value) {
    const salesChartInstance = echarts.init(salesChart.value)
    const salesOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120000, 150000, 180000, 160000, 200000, 220000],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#409eff'
        }
      }]
    }
    salesChartInstance.setOption(salesOption)
  }
  
  // 员工业绩排行图
  if (employeeChart.value) {
    const employeeChartInstance = echarts.init(employeeChart.value)
    const employeeOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['张三', '李四', '王五', '赵六', '钱七']
      },
      series: [{
        data: [100000, 88000, 75000, 65000, 55000],
        type: 'bar',
        itemStyle: {
          color: '#67c23a'
        }
      }]
    }
    employeeChartInstance.setOption(employeeOption)
  }
}
</script>

<style lang="scss" scoped>
.performance-page {
  .card-header {
    font-weight: bold;
  }
  
  .stats-row {
    margin-bottom: 20px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
          font-size: 24px;
          color: white;
          
          &.sales {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.orders {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
          
          &.conversion {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.employees {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }
        
        .stat-info {
          .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
          }
          
          .stat-label {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
  }
  
  .charts-row {
    margin-bottom: 20px;
    
    .chart-card {
      .chart-container {
        height: 300px;
      }
    }
  }
  
  .table-card {
    .table-container {
      margin-top: 20px;
    }
  }
}
</style>
